page-home {

  color: #fff;
  @keyframes shake {

    from,
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);
    }

    20%,
    40%,
    60%,
    80% {
      -webkit-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);
    }
  }

  ion-content {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden !important;
    letter-spacing: 0.2vw;
    word-spacing: 0.1vw;


    .menu {
      width: 100vw;
      height: 10vh;
      padding-top: 2vh;
      font-size: 4.5vw;
      line-height: 4.5vh;
      position: relative;
      ion-chip {
        background: none;
        color: #fff;

        ion-label {
          font-size: 4.8vw;
          font-weight: 700;
        }
      }

      .menu_left {
        float: left;
        margin-left: 4vw;
      }

      .menu_right {
        float: right;
        margin-right: 4vw;

        img {
          width: 10vw;
          margin-top: -1.5vw;
        }
      }
      .switch{
        padding: 0;
        margin: 0;
        list-style: none;
        margin: 0;
        list-style: none;
        position: absolute;
        left: 4vw;
        top: 15vw;
        background: #fff;
        color: #333;
        text-align: center;
        z-index: 9999;
        border-radius: 2vw;
        display: none;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        li{
          font-size: 3.2vw;
          border-bottom: 1px solid #eee;
          padding: 0 3vw;
          min-width: 30vw;
        }
        li:last-child{
          border-bottom: none;
        }
        .sanjiao{
          position: absolute;
          width: 3vw;
          height: 3vw;
          top: -1.5vw;
          left: 3vw;
          background: #fff;
          transform: rotate(45deg);
        }
      }
    }

    .temperature {
      font-size: 24vw;
      width: 100vw;
      height: 19vh;
      position: relative;

      div {
        width: 48vw;
        height: 19vh;
        line-height: 19vh;
        white-space: nowrap;
        text-align: center;
        position: relative;
        width: 100%;
      }

      .update_time {
        position: absolute;
        margin: 0;
        font-size: 4.2vw;
        text-align: center;
        width: 100%;
        height: 4vh;
        line-height: 4vh;
        overflow: hidden;
      }

      .update_time {
        top: -4vw;
      }

    }


    .big_div {
      position: relative;
      width: 100vw;
      height: 52vh;

      .line {
        position: absolute;
        width: 1vw;
        height: 0;
        top: 9vh;
        left: 22vw;
        background: #beacbc;
        z-index: 1;
        opacity: 0.3;
      }

      .weather_info {
        height: 10vh;
        width: 100vw;
        text-align: right;
        padding-right: 4vw;
        position: relative;
        margin-bottom: 5vh;

        .weather_info_type {
          height: 6vh;
          font-size: 6vw;
          line-height: 6vh;
        }

        .weather_info_humidity {
          height: 16vh;
          font-size: 4vw;
          line-height: 4vh;
          p {
            margin: 0;
          }
        }

        .weather_img {
          position: absolute;
          width: 24vw;
          height: 10vh;
          top: 0;
          left: 10.5vw;
          z-index: 2;

          img {
            width: 24vw;
            height: 10vh;
          }
        }
      }



      .forecast_1h {
        position: relative;
        width: 100vw;
        height: 0;
        overflow: hidden;
        overflow-y: scroll !important;
        font-size: 4.8vw;
        margin-bottom: 1vh;

        .forecast_1h_list {
          width: 100vw;
          height: 7vh;
          margin-top: 3vh;

          div {
            float: left;
            margin-left: 4vw;
            height: 7vh;
            line-height: 7vh;

            p {
              margin: 0;
              line-height: 3.5vh;
              height: 3.5vh;
            }

            p:nth-child(2) {
              font-size: 3.8vw;
              color: rgba(255,255,255,0.6) !important;
            }
          }

          div:first-child {
            font-size: 4vw;
          }

          div:nth-child(2) {
            width: 8vw;
            img{
              display: block;
              padding-top: 2vw;
              width: 100%;
            }
          }
        }

        .forecast_1h_list:first-child {
          margin-top: 0;
        }
      }

    }

    .forecast_24h {
      width: 100vw;
      height: 18vh;
      position: absolute;
      bottom: 0;
      left: 0;

      p {
        margin: 0;
        font-size: 4vw;
      }

      p:first-child,
      p:nth-child(2) {
        font-size: 3.2vw;
        color: rgba($color: #fff, $alpha: 0.7);
      }

      p:nth-child(3) {
        margin: 2vw 0;
        text-align: center;
      }

      img {
        width: 8vw;
      }

      ion-grid {
        padding: 0;

        ion-col {
          padding: 0
        }
      }

      .swiper-pagination-bullet-active {
        background: #fff;
      }

      .swiper-pagination-fraction,
      .swiper-pagination-custom,
      .swiper-container-horizontal>.swiper-pagination-bullets {
        bottom: 0 !important;
      }
    }
  }

  .sharke {
    animation: shake 1s;
  }
  .red{
    color: #fea6b6 !important;
  }
  .white{
    color: #f1f1f1 !important;
  }
}
